<template>
	<view class="">
		<view class="u-page">
			<u-list :height="swiperHeight">
				<u-list-item>
					<u-cell-group border="false">
						<u-cell class="cell" size="large" v-for="(item, index) in res.data" :key="index">
							<view class="title" slot="title"><text>{{item.staffName}}</text></view>
							<view class="label" slot="label">{{ formattedDate(item.day,"MM/dd") }}</view>
							<view class="value" slot="value">{{item.status==1?"上班":"休班"}}</view>
						</u-cell>
					</u-cell-group>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	import { formatDate } from '@/common/utils/commonHelper.js'
	import listHeightMixin from '@/common/computedAltitude.js'
	export default {
		mixins:[listHeightMixin],
		data() {
			return {
				keyword: '',
				dataId: 0,
				res: {},
			}
		},

		onLoad() {
			var that = this;
			debugger
			if (this.id !== undefined) {
				this.dataId = this.id;
			}
			this.getData(this.dataId);
		},
		methods: {
			scrolltolower() {
				console.log('pages')
			},
			getData(id) {
				var that = this;
				if (id === undefined) {
					that.$reqPost('StaffRosteringList', {
						page: 1,
						limit: 20
					}).then(res => {
						that.$data.res = res;
					})
				} else {
					that.$reqPost('StaffRosteringList', {
						page: 1,
						limit: 20,
						staffId: id
					}).then(res => {
						that.$data.res = res;
					})
				}
			},
			formattedDate(value, format) {
				return formatDate(value, format);
			}
		}

	}
</script>

<style lang="scss" scoped>
	.search-box {
		padding: 20rpx;
		background-color: #fff;
	}

	.u-page {
		background-color: #fff;

	}

	.cell {
		.title {
			font-size: 32rpx;
		}

		.value {
			font-size: 28rpx;
		}

		.label {
			font-size: 28rpx;
		}
	}
</style>
